<template>
  <div>
    <div class="panel-container">
      <div class="panel-content content-1">
        <div class="panel-title">资产信息-微信公众号推送</div>
        <div class="text-desc">
          推送规则：<br />
          尊享会员/旗舰会员/VIP会员/标准会员：6:00-22:00之内实时推送，其他时间点统一推送 <br />
          基础会员/行业会员：1次/小时（拍卖/资产/报价随机1条）
        </div>
        <div class="panel-line">
          <div class="panel-item">
            <div class="text-num">88560</div>
            <div class="text-name">推送总量</div>
          </div>
          <div class="panel-item">
            <div class="text-num">82840</div>
            <div class="text-name">查看</div>
          </div>
          <div class="panel-item">
            <div class="text-num">88%</div>
            <div class="text-name">查看率</div>
          </div>
        </div>
      </div>
      <div class="panel-content content-2">
        <div class="panel-sub-title">极端数据(Top10)</div>
        <el-table stripe :data="tableData1" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%">
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="name" label="公司名称"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num1" label="推送总量"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num2" label="订阅-分类"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num3" label="订阅-关键词"> </af-table-column>
        </el-table>
      </div>
    </div>
    <div class="panel-container">
      <div class="panel-content content-1">
        <div class="panel-title">资产信息-PUSH推送</div>
        <div class="text-desc">
          推送规则：<br />
          所有会员：6:00-22:00之内实时推送
        </div>
        <div class="panel-line">
          <div class="panel-item">
            <div class="text-num">88560</div>
            <div class="text-name">推送总量</div>
          </div>
          <div class="panel-item">
            <div class="text-num">82840</div>
            <div class="text-name">查看</div>
          </div>
          <div class="panel-item">
            <div class="text-num">88%</div>
            <div class="text-name">查看率</div>
          </div>
        </div>
      </div>
      <div class="panel-content content-2">
        <div class="panel-sub-title">极端数据(Top10)</div>
        <el-table stripe :data="tableData1" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%">
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="name" label="公司名称"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num1" label="推送总量"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num2" label="订阅-分类"> </af-table-column>
          <af-table-column align="center" header-align="center" show-overflow-tooltip prop="num3" label="订阅-关键词"> </af-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Panel5',
  data() {
    return {
      tableData1: [
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
        {
          name: '王小虎',
          num1: 688,
          num2: 688,
          num3: 688,
          num4: 688,
          num5: 688,
        },
      ],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}
.text-desc {
  padding: 10px 16px;
  background: #fef3e4;
  margin-top: -10px;
  margin-bottom: 20px;
  line-height: 1.3;
  display: inline-block;
}
.panel-sub-title {
  margin-top: 30px;
}
.content-1 {
  .panel-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f6f6f6;
    padding: 20px 0;
    margin-right: 30px;
    border-radius: 4px;
    &:last-child {
      margin: 0;
    }
    .text-num {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}
</style>
